<template>
  <div class="box partner-node-collect">
    <div class="header">
      <div class="title">合作商点位数Top5</div>

      <el-icon @click="handleMoreClick"><MoreFilled /></el-icon>
    </div>
    <el-row :gutter="20" type="flex" align="middle" class="body">
      <el-col :span="17" class="chart-container">
        <partner-node-collect-pie-chart 
          v-if="pieChartOption.seriesData.length > 0"
          :chart-option="pieChartOption" 
        />
        <div v-else class="no-data">暂无数据</div>
      </el-col>
      <el-col :span="7">
        <div class="collect">
          <div class="count">{{ totalNodes }}</div>
          <div class="name">点位数</div>
          <div class="count count2">{{ totalPartners }}</div>
          <div class="name">合作商数</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { listPartner } from '@/api/manage/partner'
import { listNode } from '@/api/manage/node'
import {loadAllParams} from "@/api/page";
import PartnerNodeCollectPieChart from './partner-node-collect-pie-chart.vue'

const router = useRouter()
const pieChartOption = ref({
  seriesData: []
})
const totalNodes = ref(0)
const totalPartners = ref(0)

// 处理更多点击
const handleMoreClick = () => {
  router.push('/node/partner')
}

// 获取数据并处理
const fetchData = async () => {
  try {
    const [partnerRes, nodeRes] = await Promise.all([
      listPartner(loadAllParams),
      listNode(loadAllParams)
    ])
    
    const partners = partnerRes.rows || []
    const nodes = nodeRes.rows || []
    
    // 使用 total 值
    totalNodes.value = nodeRes.total || nodes.length
    totalPartners.value = partnerRes.total || partners.length
    
    // 统计每个合作商的点位数
    const partnerNodeCount = {}
    
    // 先遍历所有合作商，确保每个合作商都被计入
    partners.forEach(partner => {
      partnerNodeCount[partner.id] = {
        name: partner.partnerName,
        value: 0
      }
    })
    
    // 统计点位数
    nodes.forEach(node => {
      if (partnerNodeCount[node.partnerId]) {
        partnerNodeCount[node.partnerId].value++
      }
    })
    
    // 转换为数组并排序
    let sortedData = Object.values(partnerNodeCount).sort((a, b) => b.value - a.value)
    
    console.log('合作商点位统计:', sortedData)
    
    if (sortedData.length > 5) {
      const top5 = sortedData.slice(0, 5)
      const othersValue = sortedData.slice(5).reduce((sum, item) => sum + item.value, 0)
      
      pieChartOption.value.seriesData = [
        ...top5,
        {
          name: '其余合作商',
          value: othersValue,
          itemStyle: { color: '#CCCCBB' }
        }
      ]
    } else {
      pieChartOption.value.seriesData = sortedData
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    pieChartOption.value.seriesData = [{
      name: '暂无数据',
      value: 0
    }]
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.partner-node-collect {
    display: flex;
    flex-direction: column;
    height: calc(40vh - 48px);
    min-height: 353px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.title {
    font-size: 16px;
    font-weight: bold;
}

.body {
    flex: 1;
    display: flex;
    align-items: center;
}

.chart-container {
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-data {
    color: #999;
    font-size: 14px;
    text-align: center;
}

.collect {
    width: 154px;
    height: 230px;
    padding-top: 47px;
    padding-left: 38px;
    background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
                linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
                linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
                linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

.count {
    height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #072074;
    line-height: 33px;
}

.count2 {
    margin-top: 20px;
}

.name {
    height: 17px;
    margin-top: 6px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000412;
    line-height: 17px;
}

.more {
    color: #5f84ff;
    cursor: pointer;
}
</style>
